<div class="easyui-layout" data-options="fit:true">
	<div data-options="region:'west',collapsed:false" style="width:408px">
		<div class="con" onselectstart="return false;" style="-moz-user-select:none;">
			<table id="goodsCat"></table>
		</div>
	</div>
	<div data-options="region:'center'">
		<div id="tb<?php echo $uniqid;?>">
			<table cellspacing="0" cellpadding="0">
				<tbody>
				<tr>

					<td>
						<div class="datagrid-btn-separator"></div>
					</td>
					<td><a href="javascript:void(0);" onclick="goodsReload();"
						   class="l-btn l-btn-small l-btn-plain"><span
							class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
							class="l-btn-text">重载</span></span></a></td>
					<td>
						<div class="datagrid-btn-separator"></div>
					</td>


					<td><a href="javascript:void(0);" onclick="goodsSearch();"
						   class="l-btn l-btn-small l-btn-plain"><span
							class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
							class="l-btn-text">查询</span></span></a></td>
				</tr>
				</tbody>
			</table>
		</div>
		<div class="con" style="-moz-user-select:none;">
			<table id="goods"></table>
		</div>
	</div>
</div>


<div id="goodsdlg" class="easyui-dialog" style="width:720px; height:460px;" title="信息框" closed="true"></div>
<script>
	var goodsReload = function () {
		$("#goods").datagrid('reload');
	};
	var goodsSearch = function (id) {
		if(!id){
			id = -1;
			// console.log('不存在');
		}
		console.log(id);
		var height = $(window).height() - $(".top").height() - 46;//表格高度
		var width = $(window).width() - $(".leftmenu").width() - 206 - 8;
		$("#goods").datagrid({
			title: '明细列表',
			width: width,
			height: height,//高度
			singleSelect: true,//如果为true，则只允许选择一行
			striped: true,//是否显示斑马线效果。
			rownumbers: false,//如果为true，则显示一个行号列。
			pagination: true,//是否显示分页
			pageSize: 15,
			pageList: [15, 30, 40, 50],
			method: 'post',
			sortName: 'created_at',
			sortOrder: 'desc',
			mode: "orderdividend",
			url: '/admin/moneylog/index',
			queryParams: {
				event_id: id,
				mode:"orderdividend"
			},
			fitColumns: false,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
			nowrap: false,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
			selectOnCheck: false,
			checkOnSelect: true,
			toolbar: '#tb<?php echo $uniqid;?>',
			columns: [[
				{field:'id',title:'ID', width: fixWidth(5), align: "center", halign: 'center'},
				{field:'get_member',title:'用户', width: fixWidth(20), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
						let content = '';
						if(value){
							if(value.avatar){
								content += '<div style="display: flex" class="touxiang_wenzi">';
								content += '<div style="width: 32px; display: flex; align-items: center;"><img style="width: 30px; height: 30px; border-radius: 50%; border:1px solid #eee; overflow: hidden;" src="'+value.avatar+'"></div>';
								content += '<div style="width: calc(100% - 42px); padding-left: 10px;">';
							}else{
								content += '<div class="touxiang_wenzi">';
							}
							content += '用户ID：<span>'+rowData.member_id+'</span><br>';
							if(value.realname){
								content += '昵称(姓名)：<span>'+value.nickname+'('+value.realname+')</span><br>';
							}else{
								content += '昵称：<span>'+value.nickname+'</span><br>';
							}
							content += '手机号：<span>'+value.phone+'</span>';
							if(value.avatar){content += '</div>';}
							content += '</div>';
						}
						return content;
					}},
				{field:'money',title:'变动金额', width: fixWidth(12), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
						let spanClass = value > 0 ? 'money_add' : 'money_subtract';
						return '<span class="'+spanClass+'">'+ parseFloat(value)+'元</span>';
					}},
				{field:'before',title:'帐户余额变动', width: fixWidth(12), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
						return '<span class="change_before">' + value + '</span>&nbsp;&nbsp;>>&nbsp;&nbsp;<span class="change_after">'+ rowData.after + '元</span>';
					}},
				{field:'created_at',title:'变动时间', width: fixWidth(12), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
						return value?value:'--';
					}},
				{field:'remark',title:'备注', width: fixWidth(5), align: "left", halign: 'center', styler:function (value, rowData, rowIndex) {
						return {class:'log_remark'};
					}, formatter:function (value,rowData,rowIndex){
						return value?value:'无';
					}},
			]],
		});
	};

	var selectGoods = function () {
		var row = $('#goodsCat').datagrid('getSelected');
		if (row) {
			goodsSearch(row.id);
		}
	};
	var goodsCatSearch = function () {
		var height = $(window).height() - $(".top").height() - 46;
		var width = 408;
		$("#goodsCat").treegrid({
			title: '商品类目',
			width: width,
			height: height,//高度
			singleSelect: true,//如果为true，则只允许选择一行
			striped: true,//是否显示斑马线效果。
			rownumbers: false,//如果为true，则显示一个行号列。
			pagination: false,//是否显示分页
			pageSize: 10,
			pageList: [10, 15, 20, 25],
			method: 'post',
			idField: 'id',
			treeField: 'name',
			sortName: 'id',
			sortOrder: 'desc',
			url: '/admin/orderbbonus/index',
			queryParams: {},
			fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
			nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
			selectOnCheck: false,
			checkOnSelect: true,
			columns: [[
				{field: 'money', title: '统计金额', width: '30%'},
				{field: 'created_at', title: '统计时间', width: '60%'},
			]],
			onClickRow: function (index, field) {
				selectGoods();
			},
		});
	};
	goodsCatSearch();
	goodsSearch();
	onTreegridResize("#goodsCat");
	onDatagridResize("#goods");
</script>
